<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model checkbox复选框</title>
</head>
<body>
    <script src='/js/vue.js'></script>
    <div id='app'>
        <!-- 复选框分单独使用和组合使用
            复选框单独使用时，v-model绑定至为布尔值，选中为true 未选中为false
        -->

        <!-- 第一种 单个复选框 -->
        <label for="license">
            <input type="checkbox" id="license">同意协议
        </label>

        <h2>您的选择是{{isAgree}}</h2>

        <button :disable="!isAgree">注册</button>
        <!-- 第二种，多个复选框组合使用 -->

        <!-- 复选框一起使用的时候，板顶的是一个数组，如果选中复选框，将保存到数组中 -->
        <input type="checkbox" value="篮球" id="" v-model="hobbies">篮球
        <input type="checkbox" value="足球" id="" v-model="hobbies">足球
        <input type="checkbox" value="网球" id="" v-model="hobbies">网球
        <input type="checkbox" value="羽毛球" id="" v-model="hobbies">羽毛球

        <h2>您的选择是{{hobbies}}</h2>

        <p>{{msg}}</p>
    </div>

    <script>
        let app = new Vue({
            el:'#app',
            data:{
                msg:'hello word',
                isAgree:false,//设置默认是否选中
                hobbies:[]
            }
        })
    </script>

</body>
</html>